<template>
  <div class="box">
    <div class="top">
      <van-nav-bar title="会员登录" left-arrow @click-left="$router.back()" />
    </div>
    <div class="cengter">
      <div class="cengter-word">
        <div>手机号登录</div>
        <p>未注册的手机号登录后将自动注册</p>
      </div>
      <div class="inpot">
        <div class="inpot-sj"><input placeholder="请输入手机号" v-model="phoneNumbre" /></div>
        <div class="inpot-sj">
          <input placeholder="请输入图形验证码" v-model="picWord" />
          <img :src="picurl" v-if="picurl" @click="getCompu()" />
        </div>
        <div class="inpot-sj">
          <input placeholder="请输入短信验证码" v-model="phonmSms" />
          <button @click="getSecond()">{{totalSecond===Second?"获取验证码":Second+"秒后重新获取验证码"}}</button>
        </div>
      </div>
      <div>
        <van-button color="linear-gradient(to right, #EEB137, #FD9616)" class="ann" @click="login">
          登录
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>

import { Toast } from 'vant'
import { getCont, geTcing, login } from '@/api/log'
import urel from '@/store/masxt/urel'

export default {
  name: 'ComLog',
  component: {
    urel
  },
  data () {
    return {
      picCotd: '',
      pickey: '',
      picurl: '',
      Second: 60, // 总秒数
      totalSecond: 60, // 当前秒数
      timer: null, // 定时器名字
      phoneNumbre: '', // 输入的手机号
      picWord: '', // 图形验证码
      phonmSms: '' // 手机验证码

    }
  },
  methods: {
    valid () {
      if (!/^1[3-9]\d{9}$/.test(this.phoneNumbre)) {
        Toast('请输入正确的手机号')
        return false
      }
      if (!/^\w{4}$/.test(this.picWord)) {
        this.$toast('请输入正确图形验证码')
        return false
      }
      return true
    },
    async login () {
      if (!this.valid()) {
        return false
      }
      if (!/^\w{6}$/.test(this.phonmSms)) {
        this.$toast('请输入正确的手机验证码')
        return false
      }
      try {
        const res = await login(this.phoneNumbre, this.phonmSms)
        this.$store.commit('urel/saveInfo', res.data.data)
        this.$toast('登陆成功')
        const url = this.$route.query.backUrl || '/'
        this.$router.replace(url)
      } catch (error) {
        console.log(error)
      }
    },
    async getSecond () {
      if (!this.valid()) {
        return
      }
      if (!this.timer && this.totalSecond === this.Second) {
        const res = await getCont(this.picWord, this.pickey, this.phoneNumbre)
        console.log(res)
        this.timer = setInterval(() => {
          this.Second--
          if (this.Second <= 0) {
            clearInterval(this.timer)
            this.timer = null
            this.Second = this.totalSecond
          }
        }, 1000)
      }
    },

    async getCompu () {
      const {
        data: {
          data: { base64, key }
        }
      } = await geTcing()
      this.picurl = base64
      this.pickey = key
    }
  },
  created () {
    this.getCompu()
  },
  destroyed () {
    clearInterval(this.timer)
  }
}
</script>

<style lang="less">
.box {
  .cengter {
    padding: 25px 15px;
    .ann{
      width: 100%;
      border-radius: 20px;
      margin-top:30px;
    }
    .cengter-word {
      div {
        font-size: 20px;
        margin-bottom: 10px;
      }
      p {
        font-size: 12px;
        color: #cccac6;
      }
    }
  }
  .inpot {
    font-size: 15px;
    input {
      border: none;
    }
    .inpot-sj {
      border-bottom: 1px solid #f9f8f9;
      padding: 25px 5px;
      button {
        width: 70px;
        font-size: 12px;
        color: #d0a379;
        border: none;
        background: none;
      }
      img {
        width: 80px;
        height: 25px;
      }
    }
  }
}
</style>
